<template>
	<view class="page">
    <view class="page-navbar" :style="'background-image: url('+indexBg+');'">
      <u-navbar :fixed="false" title="印章管理" placeholder bgColor="transparent"></u-navbar>
    </view>
    <!-- <view class="list">
      <view class="list-item" v-for="item in sealInfoList" :key="item.id">
        <view class="u-flex u-col-top">
          <u-avatar :src="item.sealPhoto" size="56rpx" />
          <view class="info u-m-l-16">
            <view class="title u-line-1">{{ item.sealName }}</view>
            <view class="time">{{ getDiceTypeName('seal_type', item.sealType) }}</view>
          </view>
        </view>
        <view class="actions">
          <view class="actions-item" style="background: #FFDFE5;color: #FE748B;" @click="handleDelete(item.id)">
            <image src="https://gowork365.com/prod-api/profile/mini/company/action5.png" />
            <text>删除</text>
          </view>
          <view class="actions-item" style="background: #E9F8F6;color: #138E88;" @click="previewImage(item)">
            <image src="https://gowork365.com/prod-api/profile/mini/company/action2.png" />
            <text>查看</text>
          </view>
        </view>
      </view>
    </view>
    <view v-if="sealInfoList.length == 0" class="a-empty"><a-empty></a-empty></view> -->
    <view class="footer-primary-btn" @click="jumpDZQ">印章管理</view>
	</view>
</template>

<script>
import { listSealInfo, getSealUrl, delSealInfo } from '@/api/index'
import { jumpDZQ } from '@/common/util'

export default {
  data() {
    return {
      jumpDZQ,
      indexBg: 'https://gowork365.com/prod-api/profile/mini/index/indexBg1.png',
      total: 0,
      page: {
        pageNum: 1,
        pageSize: 50,
      },
      sealInfoList: [],
      dictType: '',
      dictName: [],
      dict: {},
    }
  },
  async onLoad() {
    // await this.getDicts(['seal_type'], this)
  },
  onShow() {
    // this.search()
  },
  methods: {
    getDiceTypeName(type, val) {
      if(this.dict[type]) {
        return this.dict[type].filter(v => v.value == val).map(v => v.lable).join('') || '-'
      }
      return ''
    },
    getList() {
      uni.showLoading({ mask: true })
      listSealInfo({...this.page}).then(response => {
        uni.hideLoading()
        this.sealInfoList = [...this.sealInfoList, ...response.rows];
        this.total = response.total;
      });
    },
    search() {
      this.page.pageNum = 1
      this.sealInfoList = []
      this.getList()
    },
    previewImage(item) {
      uni.showLoading({ mask: true })
      getSealUrl({id: item.id}).then(res => {
        uni.hideLoading()
        if(res.code == 200) {
          uni.previewImage({
            urls: [res.msg] // 需要预览的图片http链接列表
          })
        }
      })
    },
    handleDelete(id) {
      const that = this
      uni.showModal({
        title: '提示',
        content: '删除后不可恢复，是否确认删除？',
        success: async function (res) {
          if (res.confirm) {
            await delSealInfo(id)
            uni.showToast({
              icon: 'none',
              title: '删除成功',
            })
            that.search();
          }
        }
      });
    },
  },
  onReachBottom() {
    if(this.page.pageNum * this.page.pageSize < this.total) {
      this.page.pageNum++
      this.getList()
    }
  },
}
</script>

<style lang="scss" scoped>
.page{
	width: 750rpx;
	min-height: 100vh;
  background: #F4F7F6;
  position: relative;
  background-repeat: no-repeat;
  background-size: 750rpx 348rpx;
  padding-bottom: 180rpx;
  .page-navbar {
    background-repeat: no-repeat;
    background-size: 750rpx 690rpx;
    margin-bottom: 32rpx;
  }
  .list {
    width: 686rpx;
    margin: 0 auto;
    .list-item {
      margin-bottom: 32rpx;
      width: 686rpx;
      background: #FFFFFF;
      box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(11,102,97,0.2);
      border-radius: 16rpx;
      padding: 48rpx 32rpx 40rpx;
      position: relative;
      .info {
        height: 138rpx;
        margin-bottom: 48rpx;
        .title {
          font-size: 28rpx;
          color: rgba(0,0,0,0.85);
          margin-bottom: 16rpx;
        }
        .time {
          font-size: 24rpx;
          color: rgba(0,0,0,0.25);
        }
      }
      .actions {
        display: flex;
        gap: 24rpx;
        .actions-item {
          flex: 1;
          height: 76rpx;
          border-radius: 8rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 4rpx;
          font-family: PingFangSC, PingFang SC;
          font-size: 24rpx;
          image {
            width: 32rpx;
            height: 32rpx;
          }
        }
      }
    }
  }
}
</style>
